<template>
    <div class="clerk">
        <div class="clerk-header">基本资料</div>
        <div class="clerk-main">
            <div class="clerk-nickname">
               <van-field v-model="value" label="昵称：" placeholder="请输入昵称" input-align="right"/>
            </div>
            <div class="clerk-wechat">
              <van-field v-model="value" label="微信：" placeholder="请输入微信" input-align="right"/>
            </div>
            <div class="clerk-sex">
              <label for="">性别：</label>
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="男">男</van-radio>
                <van-radio name="女">女</van-radio>
              </van-radio-group>
            </div>

           <div class="clerk-date">
             <van-cell
               title="生日："
               is-link
               :value="timeValue"
               @click="showPopup" />
             <van-popup v-model="show" position="bottom">
               <van-datetime-picker
                 v-model="currentDate"
                 type="date"
                 :loading="isLoadingShow"
                 :min-date="minDate"
                 :max-date="maxDate"
                 :formatter="formatter"
                 @cancel="show = false"
                 @confirm="confirmPicker"
               />
             </van-popup>
           </div>
           <div class="clerk-area">
             <van-field readonly required clickable label="地区：" :value="valueArea" placeholder="请选择所在地区" @click="bindShow" input-align="right"/>

             <!--选择省市区-->
             <van-popup v-model="showArea" position="bottom" :style="{ height: '40%' }">
               <van-area :area-list="areaList" @confirm="onAreaConfirm" @cancel="bindCancel" />
             </van-popup>

           </div>
        </div>
         <div class="next">
           <router-link to="/userdata" id="next">下一步</router-link>
         </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { Field, RadioGroup, Radio, DatetimePicker, Popup,Cell,Area } from 'vant';
    import AeraInfo from "../../../common/area.js";

    Vue.use(Radio);
    Vue.use(RadioGroup);
    Vue.use(Field);
    Vue.use(DatetimePicker);
    Vue.use(Popup);
    Vue.use(Cell);
    Vue.use(Area);
    export default {
      name: "BecomeClerk",
      data() {
        return {
          value: '',
          radio: '男',
          timeValue: '',
          show: false,
          isLoadingShow: true,
          currentDate: new Date(),
          minDate: new Date(1900, 1, 1),
          maxDate: new Date(),
          areaList: AeraInfo, //引用地区信息
          showArea: false,
          valueArea: '', //地区值
          arrArea: [], //存放地区数组
        }
      },
      methods: {
        showPopup() {
          this.show = true
          this.isLoadingShow = true
          setTimeout(() => {
            this.isLoadingShow = false
          }, 500)
        },
        // 确认选择之后的时间
        confirmPicker (val) {
          let year = val.getFullYear()
          let month = val.getMonth() + 1
          let day = val.getDate()
          // let hour = val.getHours()
          // let minute = val.getMinutes()
          // // let second = val.getSeconds()
          if (month >= 1 && month <= 9) { month = `0${month}` }
          if (day >= 1 && day <= 9) { day = `0${day}` }
          // if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
          // if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
          // // if (second >= 0 && second <= 9) { second = `0${second}` }
          // this.timeValue = `${year}-${month}-${day} ${hour}:${minute}:00`
          this.timeValue = `${year}-${month}-${day}`
          console.log(this.timeValue)

          this.show = false
        },
        // 日期选项格式化函数
        formatter (type, value) {
          if (type === 'year') {
            return `${value}年`
          } else if (type === 'month') {
            return `${value}月`
          } else if (type === 'day') {
            return `${value}日`
          }
          // else if (type === 'hour') {
          //   return `${value}时`
          // } else if (type === 'minute') {
          //   return `${value}分`
          // } else if (type === 'second') {
          //   return `${value}秒`
          // }
          return value
        },
        bindShow(){
          this.showArea= true;
        },
        bindCancel(){
          this.showArea= false;
        },
        //地区选择
        onAreaConfirm(val) {
          this.showArea = false;
          this.arrArea = val;
          var addrInfo = val[0].name + '-' + val[1].name + '-' + val[2].name;
          this.valueArea = addrInfo
        }
      }
    }
</script>

<style scoped lang="stylus">
    @import '~style/mixins.styl'
    @import '~style/varibles.styl'
    .clerk
      .clerk-header
        font-size .3rem
        color #333333
        padding .2rem .3rem
      .clerk-main
        .clerk-nickname
          border-bottom  1px solid #F2F2F2
        .clerk-wechat
          border-bottom  1px solid #F2F2F2
        .clerk-sex
          between-align-items()
          height .88rem
          padding 0 .3rem
          background #fff
          border-bottom  1px solid #F2F2F2
        .clerk-date
          between-align-items()
          height .88rem
          background #fff
          border-bottom  1px solid #F2F2F2
        .clerk-area
          between-align-items()
          height .88rem
          background #fff
          border-bottom  1px solid #F2F2F2
      .next
          width 100%
          position fixed
          bottom .3rem
          left 0
          right 0
          center()
          #next
            border-radius .5rem
            width calc(100% - .55rem)
            height .9rem
            center-align-items()
            color #fff
            font-size .3rem
            background $DefaultColor
</style>
<style>
 .clerk .van-radio__icon--checked .van-icon{
    color: #fff;
    background-color: #CED1EF;
    border-color: #CED1EF;
  }
 .clerk .van-picker__confirm{
    color: #CED1EF;
  }
 .clerk .van-picker__cancel{
    color: #CED1EF;
  }
 .clerk .van-cell--required::before{
    color: transparent;
  }
 .clerk .van-cell::after{
   border-bottom: unset;
 }
</style>
